<template>
  <div name="app">
    <div>倒计时：{{time}}</div>

    <div>
      <div>每天的开始时间：{{startTime}}</div>
      <div>每天的结束时间：{{endTime}}</div>
      <div>每天的倒计时：{{hr}}:{{min}}:{{sec}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      time: "",
      maxTime: 6, // 倒计时件  以小时为单位

      startTime: "00:00:00",
      endTime: "00:00:20",
      hr: "",
      min: "",
      sec: ""
    };
  },
  mounted: function() {
    this.countdown();
    this.get_time();
  },
  methods: {
    // 方法二
    get_time: function() {
      var _this = this;
      // 获取系统日期
      var year = new Date().getFullYear();
      var month = new Date().getMonth() + 1;
      var strDate = new Date().getDate();
      // 设置日期为系统当天的日期
      var date = year + "-" + month + "-" + strDate;

      // 设置项目的每天的日期都为当天的
      var startTime = date + " " + this.startTime;
      var endTime = date + " " + this.endTime;
      // 获取时间戳
      var start = Date.parse(startTime);
      var end = Date.parse(endTime);
      // 获取时间戳总秒数 所以要出去1000毫秒
      var msec = (end - start) / 1000;

      //   设置定时器
      var ins = setInterval(function() {
        if (msec >= 0) {
          // 计算时分秒数
          let h = parseInt((msec / 60 / 60) % 24);
          let m = parseInt((msec / 60) % 60);
          let s = parseInt(msec % 60);
          msec--;
          // 赋值
          _this.hr = h > 9 ? h : "0" + h;
          _this.min = m > 9 ? m : "0" + m;
          _this.sec = s > 9 ? s : "0" + s;
        } else {
          // 清除定时器
          clearInterval(ins);
        }
      }, 1000);
    },

    //   方法一
    countdown: function() {
      var time = this.maxTime * 3600; //设置所有时间有多少秒
      var _this = this;
      var timer = setInterval(function() {
        if (time > 0) {
          time--;
          // Math.floor() 取整
          let hr = Math.floor(time / 3600);
          let min = Math.floor((time / 60) % 60);
          let sec = Math.floor(time % 60);
          _this.time =
            (hr < 10 ? "0" + hr : hr) +
            ":" +
            (min < 10 ? "0" + min : min) +
            ":" +
            (sec < 10 ? "0" + sec : sec);
        } else {
          clearInterval(timer);
        }
      }, 1000);
    }
  }
};
</script>